<template>
  <!-- 表单填写 -->
  <view class="xinguan-view">
    <view class="xinguan-flex">
      <text>姓名</text>
      <input
        placeholder="请输入姓名"
        v-model="insertData.name"
        placeholder-class="input-style"
      />
    </view>
    <view class="xinguan-flex">
      <text>身份证</text>
      <input
        placeholder="请输入身份证"
        v-model="insertData.id_card"
        placeholder-class="input-style"
      />
    </view>
    <view class="xinguan-flex">
      <text>手机号</text>
      <input
        placeholder="请输入手机号"
        v-model="insertData.phone"
        type="number"
        placeholder-class="input-style"
      />
    </view>
    <view class="xinguan-flex">
      <text>现居地址</text>
      <picker mode="region" class="flex-left" @change="changeRegion">
        <view>
          <!--  -->
          <text>{{
            insertData.address == "" ? "请选择现居地址" : insertData.address
          }}</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
    <view class="xinguan-flex">
      <text>现居详细地址</text>
      <input
        placeholder="请输入现居详细地址"
        v-model="insertData.de_address"
        placeholder-class="input-style"
      />
    </view>
    <view class="xinguan-flex">
      <text>疫苗人群分类</text>
      <picker
        mode="selector"
        class="flex-left"
        :range="rangeData"
        @change="changeSelector"
      >
        <view>
          <text>{{
            insertData.crowd_sort == ""
              ? "请选择疫苗人群分类"
              : insertData.crowd_sort
          }}</text>
          <image src="/static/other/gengduo.svg"></image>
        </view>
      </picker>
    </view>
  </view>
  <!-- 预约时间 -->
  <view>
    <!-- 医院地址 -->
    <view class="reserve-address">
      <text class="reserve-name">{{ newapptime.Hospital }}</text>
      <text class="reserve-road">{{ newapptime.address }}</text>
      <view class="reserve-title">
        <text v-for="(item, index) in newapptime.company" :key="index">{{
          item
        }}</text>
      </view>
    </view>
    <!-- 星期 -->
    <view class="Week">
      <view
        class="Week-flex"
        v-for="(item, index) in newapptime.week"
        :key="index"
        @click="ChooseWeek(index)"
      >
        <view
          :class="[
            'Week-style',
            'Week-sup',
            weekIndex == index ? 'checkstyle' : '',
          ]"
        >
          <text>{{ item.day }}</text>
          <text>{{ item.date }}</text>
          <text>{{ item.Have }}</text>
        </view>
      </view>
    </view>
    <!-- 时段 -->
    <view
      class="period-view"
      v-for="(item, index) in newapptime.lasting"
      :key="index"
    >
      <text class="period-title">{{ item.period }}</text>
      <view class="Week-flex">
        <block v-for="(m, i) in item.time" :key="i">
          <view
            :class="[
              'Week-style',
              'Week-Down',
              timeIndex == index + '-' + i ? 'checkstyle' : '',
            ]"
            @click="ChooseTime(index + '-' + i)"
          >
            <text>{{ m.start_time }}--{{ m.end_time }}</text>
            <text>剩余{{ m.over }}</text>
          </view>
        </block>
      </view>
    </view>
  </view>
  <!-- 底部按钮 -->
  <view style="height: 300rpx"></view>
  <view class="submit">
    <text @click="Cancel">取消预约</text>
    <text @click="Submit">提交预约</text>
  </view>
</template>

<script setup lang="ts">
// 1.引入基础模块
import { ref, onMounted, reactive, toRefs } from "vue";
import { reqNewapptime } from "@/serve/api";
import { newapptimeType, rescovidType } from "@/types/index";

// 2.定义页面响应式数据
let pageData = reactive({
  newapptime: {} as newapptimeType, //预约时间数据
  weekIndex: -1, //日期默认寻找下标，
  timeIndex: "-1", //时段默认选择下标
  insertData: {
    name: "",
    id_card: "",
    phone: "",
    address: "",
    de_address: "",
    crowd_sort: "",
    date: "",
    period: "",
    reserve_time: "",
    when: 0,
  } as rescovidType,
  rangeData: [
    "医疗卫生人员",
    "卫生系统内工作的其他人员",
    "因公出国人员",
    "对外劳务派遣人员",
    "留学生",
    "因私出国人员",
    "海关边检人员",
    "公安系统",
    "消防人员",
    "政党机关",
    "事业单位人员",
    "社区工作者",
    "社区工作者",
    "教育工作者",
    "小学和中学学生",
    "其他人员",
  ],
});

// 3.批量解构页面响应式数据
let { newapptime, weekIndex, timeIndex, insertData, rangeData } =
  toRefs(pageData);

// 4.实现日期切换
function ChooseWeek(index: number) {
  pageData.weekIndex = index;
}

// 5.实现时间段切换
function ChooseTime(index: string) {
  pageData.timeIndex = index;
}

// 6.监听用户居住地址变化
function changeRegion(event: { detail: { value: [] } }) {
  // console.log(event)
  pageData.insertData.address = event.detail.value.join(",");
}
// 7.监听接种人群变化
function changeSelector(event:any){
    console.log(event);
    let index=event.detail.value*1
    pageData.insertData.crowd_sort=pageData.rangeData[index]
    
}
onMounted(async() => {
    //获取应用医院 时间数据
    let res=await reqNewapptime();
    pageData.newapptime=res.data[0];
    console.log(res.data[0].lasting);
    
});
</script>

<style>
/* 表单提交 */
@import url("../../common-style/form.css");

page {
  background-color: #f7f7f7;
}

/* 预约地址 */
.reserve-address {
  background-color: #ffffff;
  padding: 20rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}

.reserve-address text {
  display: block;
}

.reserve-name {
  font-weight: bold;
}

.reserve-road {
  padding: 20rpx 0;
}

.reserve-title {
  display: flex;
  align-items: center;
}

.reserve-title text {
  background-color: #f7f7f7;
  padding: 5rpx 20rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}

.Week {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  display: flex;
  align-items: center;
}

.Week-flex {
  display: flex;
}

.Week-style {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  text-align: center;
  padding: 20rpx 0;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.Week-style text {
  padding: 3rpx;
}

.Week-sup {
  width: 150rpx;
}

.period-view {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin: 20rpx;
}

.period-title {
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.Week-Down {
  width: 200rpx;
}

/* 选中加上样式 */
.checkstyle {
  background-color: #2c76ef !important;
  color: #ffffff !important;
}
</style>
